<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function() {
	
	
	Ext.QuickTips.init();
	
	Ext.define('Student', { 
        extend: 'Ext.data.Model', 
        fields: ['id','displayName'] 
    });
	
	var select_store = Ext.create('Ext.data.Store', {
		model: 'Student', 
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/class1_findselected',
            reader: { 
                type: 'json', 
                root: 'students'
            }
        }
	});
	
	var unselect_store = Ext.create('Ext.data.Store', {
		model: 'Student', 
        pageSize: 10,
        proxy: { 
            type: 'ajax', 
            url: '../service/class1_findunselected',
            reader: { 
                type: 'json', 
                root: 'students'
            }
        }
	});
	
	var m_select = Ext.create('Ext.selection.CheckboxModel',{
		checkOnly:true
	});
	
	var m_unselect = Ext.create('Ext.selection.CheckboxModel',{
		checkOnly:true
	});
	
		
	Ext.create('Ext.Panel', {
	    border: 0,
	    height:360,
	    renderTo: 'membermng',
	    region: 'center',
	    layout: {
	        type: 'hbox',
	        align: 'stretch'
	    },
	    items: [{
	        xtype: 'grid',
	        selModel: m_unselect,
	        valueField: 'id',
	        id: 'role_grid',
	        columns:[{ 
	        	text: '学生姓名',  dataIndex: 'displayName', width:'80%'
	        }],
	        store: unselect_store,
	        title: '所有学生',
	        flex:1,
	        margin:5
	    },{
	    	border:0,
	    	layout: {
	    		type:'vbox',
                pack:'center',
                align:'center'
                },
                items:[{
                	margin:'0 0 10 0',
                	xtype: 'button',
    				text:'>>添加',
    				 handler: function() {
    					 var studentlist="";
    					 Ext.each(m_unselect.getSelection(),function(record, index) {
    						 studentlist+=record.data.id+",";
    					 });
    					 select_store.add(m_unselect.getSelection());
    					 unselect_store.remove(m_unselect.getSelection());
    					 m_unselect.deselectAll();
    					 Ext.Ajax.request({  
             		        url : '../service/class1_addstudents',  
             		        method : 'GET',  
             		        params : {
             		        	id: Ext.getDom('classid').value,
             		        	studentlist:studentlist
             		        },
             		        success:function(){
             		        	store.reload();
             		        }
             			});
    				 }
                },{
                	xtype: 'button',
    				text:'<<删除',
    				 handler: function() {
    					 var studentlist="";
    					 Ext.each(m_select.getSelection(),function(record, index) {
    						 studentlist+=record.data.id+",";
    					 });
    					 unselect_store.add(m_select.getSelection());
    					 select_store.remove(m_select.getSelection());
    					 m_select.deselectAll();
    					 Ext.Ajax.request({  
              		        url : '../service/class1_deletestudents',  
              		        method : 'GET',  
              		        params : {
              		        	id: Ext.getDom('classid').value,
              		        	studentlist:studentlist
              		        },
              		        success:function(){
              		        	store.reload();
              		        }
              			});
    				 }
                }]
	    },{
	        xtype: 'grid',
	        selModel: m_select,
	        id: 'action_grid',
	        valueField: 'id',
	        columns:[{
	        	text: '学生姓名',  dataIndex: 'displayName', width:'90%'
			}],
	        store: select_store,
	        title: '已添加学生',
	        flex:1,
	        margin: 5
	    }],
	    listeners:{
        	'render':function(){
        		select_store.load({
			    params: {
			        id: Ext.getDom('classid').value
			        }
			    });
			    unselect_store.load({
			    params: {
			        id: Ext.getDom('classid').value
			        }
			    });
        	}
        }
	});
});
</script>
</head>
<body>
<input type="hidden" id="classid" value="<s:property value='id'/>"/>
<div id="membermng"></div>
</body>
</html>